<template>
  <div class="company-list-page">
    <van-nav-bar title="任务单上报" left-text="返回" left-arrow fixed>
      <template #left>
        <van-icon
          name="arrow-left"
          size="18"
          color="#333"
          @click="$router.go(-1)"
        />
      </template>
      <template #right>
        <div class="nav-right" @click="goToHistoryRecord">
          <van-icon name="clock-o" size="18" color="#909399" /><span
            class="spanHeight"
            >历史记录</span
          >
        </div>
      </template>
    </van-nav-bar>
    <div class="main">
      <div class="voucher">凭证</div>
      <van-form
        label-width="130"
        input-align="right"
        style="border-radius: 4px"
      >
        <van-field
          readonly
          clickable
          name="picker"
          :value="form.projectName"
          label="白蚁防治单位名称"
          right-icon="arrow"
          placeholder="请选择"
          @click="showPicker = true"
        />
        <van-field
          label="任务单编号"
          v-model="form.bianhao"
          placeholder="请输入"
        >
          <template #right-icon>
            <span style="width: 16px; display: inline-block"></span>
          </template>
        </van-field>
      </van-form>
      <van-form
        label-width="100"
        input-align="right"
        style="border-radius: 4px; margin-top: 10px"
      >
        <van-field
          readonly
          clickable
          name="picker"
          :value="form.time"
          label="受理日期"
          right-icon="arrow"
          placeholder="请选择"
          @click="showTimePicker = true" />
        <van-field
          readonly
          clickable
          name="infirmationPicker"
          :value="form.infirmation"
          label="信息来源"
          right-icon="arrow"
          placeholder="请选择"
          @click="showInfirmationPicker = true" />
        <van-field label="小区类型" placeholder="请输入">
          <!-- <template #right-icon>
             <span style="width: 16px; display: inline-block"></span>
           </template> -->
          <template #input>
            <van-radio-group
              v-model="form.type"
              direction="horizontal"
              @change="onTypeChange"
            >
              <van-radio name="住宅">住宅</van-radio>
              <van-radio name="非住宅">非住宅</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field v-if="form.type === '非住宅'" label="录入方式">
          <template #input>
            <van-radio-group v-model="form.entryMethod" direction="horizontal">
              <van-radio name="系统录入">系统录入</van-radio>
              <van-radio name="手动录入">手动录入</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <!-- 住宅类型：点击弹出底部弹窗 -->
        <van-field
          v-if="form.type === '住宅'"
          :readonly="form.type === '住宅'"
          clickable
          name="communityPicker"
          :value="form.communityName"
          label="小区名称"
          right-icon="arrow"
          placeholder="请选择"
          @click="openCommunityPicker" />

        <!-- 非住宅且手动录入：直接输入 -->
        <van-field
          v-else-if="form.type === '非住宅' && form.entryMethod === '手动录入'"
          label="小区名称"
          v-model="form.communityName"
          placeholder="请输入"
        >
          <template #right-icon>
            <van-icon name="location-o" size="16" color="#999" />
          </template>
        </van-field>

        <!-- 非住宅且系统录入：点击弹出底部弹窗 -->
        <van-field
          v-else-if="form.type === '非住宅' && form.entryMethod === '系统录入'"
          :readonly="form.type === '非住宅' && form.entryMethod === '系统录入'"
          clickable
          name="communityPicker"
          :value="form.communityName"
          label="小区名称"
          right-icon="arrow"
          placeholder="请选择"
          @click="openCommunityPicker" />
        <van-field
          :readonly="
            form.type === '住宅' ||
            (form.type === '非住宅' && form.entryMethod === '系统录入')
          "
          :clickable="
            !(
              form.type === '住宅' ||
              (form.type === '非住宅' && form.entryMethod === '系统录入')
            )
          "
          name="addressPicker"
          :value="form.communityAddress"
          label="小区地址"
          right-icon="arrow"
          placeholder="请选择"
          @click="
            !(
              form.type === '住宅' ||
              (form.type === '非住宅' && form.entryMethod === '系统录入')
            ) && (showAddressPicker = true)
          " />
        <van-field
          label="详细地址"
          v-model="form.detailAddress"
          placeholder="请输入"
        >
          <template #right-icon>
            <span style="width: 16px; display: inline-block"></span>
          </template> </van-field
      ></van-form>
      <van-form
        label-width="130"
        input-align="right"
        style="border-radius: 4px; margin-top: 10px"
      >
        <van-field label="住户类型" placeholder="请选择住户类型">
          <template #input>
            <van-radio-group
              v-model="form.residentType"
              direction="horizontal"
              @change="onResidentTypeChange"
            >
              <van-radio name="unit">单位</van-radio>
              <van-radio name="individual">个人</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="form.residentType === 'unit'"
          label="单位名称"
          v-model="form.unitName"
          placeholder="请输入"
        >
          <template #right-icon>
            <span style="width: 16px; display: inline-block"></span>
          </template>
        </van-field>
        <van-field
          v-if="form.residentType === 'unit'"
          label="联系人"
          v-model="form.contactPerson"
          placeholder="请输入"
        >
          <template #right-icon>
            <span style="width: 16px; display: inline-block"></span>
          </template>
        </van-field>
        <van-field
          v-if="form.residentType === 'individual'"
          label="姓名"
          v-model="form.contactPerson"
          placeholder="请输入"
        >
          <template #right-icon>
            <span style="width: 16px; display: inline-block"></span>
          </template>
        </van-field>
        <van-field
          label="联系电话"
          v-model="form.contactPhone"
          placeholder="请输入"
        >
          <template #right-icon>
            <span style="width: 16px; display: inline-block"></span>
          </template>
        </van-field>
      </van-form>

      <!-- 查勘情况模块 -->
      <div class="section-title">查勘情况</div>
      <van-form
        label-width="130"
        input-align="right"
        style="border-radius: 4px; margin-top: 10px"
      >
        <van-field
          readonly
          clickable
          name="surveyTimePicker"
          :value="form.surveyTime"
          label="查勘日期"
          right-icon="arrow"
          placeholder="请选择"
          @click="openSurveyTimePicker"
        />
        <van-field
          readonly
          clickable
          name="houseTypePicker"
          :value="form.houseType"
          label="房屋类型"
          right-icon="arrow"
          placeholder="请选择"
          @click="showHouseTypePicker = true"
        />
        <van-field label="是否是白蚁" placeholder="请选择">
          <template #input>
            <van-radio-group v-model="form.isTermite" direction="horizontal">
              <van-radio name="是">是</van-radio>
              <van-radio name="否">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="houseNaturePicker"
          :value="form.houseNature"
          label="房屋性质"
          right-icon="arrow"
          placeholder="请选择"
          @click="showHouseNaturePicker = true"
        />
        <van-field label="是否是初次" placeholder="请选择">
          <template #input>
            <van-radio-group v-model="form.isFirstTime" direction="horizontal">
              <van-radio name="是">是</van-radio>
              <van-radio name="否">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          label="发现部位"
          v-model="form.discoveryLocation"
          placeholder="请输入"
        >
          <template #right-icon>
            <span style="width: 16px; display: inline-block"></span>
          </template>
        </van-field>
      </van-form>

      <!-- 施工情况模块 -->
      <div class="section-title">施工情况</div>
      <van-form
        label-width="130"
        input-align="right"
        style="border-radius: 4px; margin-top: 10px"
      >
        <van-field label="是否灭治" placeholder="请选择">
          <template #input>
            <van-radio-group
              v-model="form.isExterminated"
              direction="horizontal"
            >
              <van-radio name="是">是</van-radio>
              <van-radio name="否">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="form.isExterminated === '是'"
          label="施工情况"
          v-model="form.constructionStatus"
          placeholder="请输入"
        >
          <template #right-icon>
            <span style="width: 16px; display: inline-block"></span>
          </template>
        </van-field>
        <van-field
          v-if="form.isExterminated === '否'"
          label="原因"
          v-model="form.reason"
          placeholder="请输入"
        >
          <template #right-icon>
            <span style="width: 16px; display: inline-block"></span>
          </template>
        </van-field>
        <div class="uploadBox">
          <!-- <van-field name="uploader" label="上传凭证"> </van-field> -->
          <div class="uploadBox_tit">
            <div class="color">上传现场照片</div>
            <div>
              <van-uploader
                v-model="uploader"
                :after-read="afterRead"
                :max-count="1"
              />
            </div>
          </div>
        </div>
      </van-form>
      <template v-if="form.isExterminated === '是'">
        <van-form
          label-width="130"
          input-align="right"
          style="border-radius: 4px; margin-top: 10px"
        >
          <van-field
            readonly
            clickable
            name="constructionTimePicker"
            :value="form.constructionTime"
            label="施工时间"
            right-icon="arrow"
            placeholder="请选择"
            @click="openConstructionTimePicker"
          />
          <van-field
            readonly
            clickable
            name="exterminationAreaPicker"
            :value="exterminationAreaDisplayText"
            label="灭治部位"
            right-icon="arrow"
            placeholder="请选择"
            @click="openExterminationAreaPicker"
          />
          <van-field
            label="灭治面积 (m²)"
            v-model="form.exterminationAreaSize"
            placeholder="请输入"
            type="text"
            @input="onExterminationAreaSizeInput"
          >
            <template #right-icon>
              <span style="width: 16px; display: inline-block"></span>
            </template>
          </van-field>
          <van-field
            label="用药名称"
            v-model="form.medicationName"
            placeholder="请输入"
          >
            <template #right-icon>
              <span style="width: 16px; display: inline-block"></span>
            </template>
          </van-field>
          <van-field
            label="收费金额 (元)"
            v-model="form.chargeAmount"
            placeholder="请输入"
            type="text"
            @input="onChargeAmountInput"
          >
            <template #right-icon>
              <span style="width: 16px; display: inline-block"></span>
            </template>
          </van-field>
          <van-field
            readonly
            clickable
            name="termiteSpeciesPicker"
            :value="form.termiteSpecies"
            label="白蚁蚁种"
            right-icon="arrow"
            placeholder="请选择"
            @click="showTermiteSpeciesPicker = true"
          />
        </van-form>

        <!-- 用户满意度模块 -->
        <div class="section-title">用户满意度</div>
        <van-form
          label-width="130"
          input-align="right"
          style="border-radius: 4px; margin-top: 10px"
        >
          <van-field
            readonly
            clickable
            name="satisfactionPicker"
            :value="form.userSatisfaction"
            label="用户满意度"
            right-icon="arrow"
            placeholder="请选择"
            @click="showSatisfactionPicker = true"
          />
          <van-field label="业主本人是否在场" placeholder="请选择">
            <template #input>
              <van-radio-group
                v-model="form.ownerPresent"
                direction="horizontal"
              >
                <van-radio name="在场">在场</van-radio>
                <van-radio name="不在场">不在场</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            label="用户签名"
            v-model="form.userSignature"
            placeholder="请输入"
            readonly
          >
            <template #right-icon>
              <span style="width: 16px; display: inline-block"></span>
            </template>
          </van-field>
          <div class="signature-section">
            <van-button
              type="info"
              plain
              size="large"
              @click="goToSignature"
              class="signature-btn"
            >
              <van-icon name="edit" size="16" style="margin-right: 8px" />
              点击添加签名
            </van-button>
          </div>
        </van-form>

        <!-- 上传任务单模块 -->
        <van-form
          label-width="130"
          input-align="right"
          style="border-radius: 4px; margin-top: 10px"
        >
          <div class="uploadBox">
            <!-- <van-field name="uploader" label="上传凭证"> </van-field> -->
            <div class="uploadBox_tit">
              <div class="color">上传任务单</div>
              <div>
                <van-uploader
                  v-model="taskUploader"
                  :after-read="afterTaskRead"
                  :max-count="1"
                />
              </div>
            </div>
          </div>
          <!-- <div class="uploadBox"> -->
          <van-field
            readonly
            clickable
            name="taskDatePicker"
            :value="form.taskDate"
            label="日期"
            right-icon="arrow"
            placeholder="请选择"
            @click="openTaskDatePicker"
          />
          <!-- </div> -->
        </van-form>
      </template>
      <!-- 白蚁防治单位名称 -->
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          value-key="controlName"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-popup v-model="showTimePicker" position="bottom">
        <van-datetime-picker
          v-model="timeTemp"
          type="date"
          title="选择受理日期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onTimeConfirm"
          @cancel="showTimePicker = false"
        />
      </van-popup>
      <van-popup v-model="showInfirmationPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="infirmationColumns"
          value-key="name"
          @confirm="onInfirmationConfirm"
          @cancel="showInfirmationPicker = false"
        />
      </van-popup>
      <!-- 小区名称弹窗 -->
      <van-popup v-model="showCommunityPicker" position="bottom">
        <div class="community-picker">
          <div class="picker-header">
            <span class="picker-title">选择小区</span>
            <van-icon name="cross" @click="showCommunityPicker = false" />
          </div>
          <div class="search-box">
            <input
              v-model="communitySearchKeyword"
              type="text"
              placeholder="请输入小区名称搜索"
              class="search-input"
              @input="onCommunitySearch"
            />
          </div>
          <div class="community-list">
            <div
              v-for="(item, index) in communityList"
              :key="index"
              class="community-item"
              @click="onCommunityItemClick(item)"
            >
              <div class="community-name">{{ item.name }}</div>
              <div class="community-address">
                {{ item.hpbName }}{{ item.stAddrFrst }}
              </div>
            </div>
            <div v-if="communityList.length === 0" class="no-data">
              暂无数据
            </div>
          </div>
        </div>
      </van-popup>
      <!-- 小区地址弹窗 -->
      <van-popup
        v-model="showAddressPicker"
        position="bottom"
        :style="{ height: '60vh' }"
      >
        <div class="address-picker">
          <div class="picker-header">
            <span class="picker-title">选择地址</span>
            <van-icon name="cross" @click="closeAddressPicker" />
          </div>
          <van-tabs v-model="active">
            <van-tab :title="areaTitle">
              <div class="area-list">
                <div
                  v-for="(item, index) in areaList"
                  :key="index"
                  class="area-item"
                  :class="{ active: selectedArea === item }"
                  @click="selectArea(item)"
                >
                  <span class="area-text">{{ item.addressName }}</span>
                  <van-icon
                    v-if="selectedArea === item"
                    name="success"
                    class="check-icon"
                  />
                </div>
                <van-empty
                  v-if="areaList.length === 0"
                  description="暂无区域数据"
                />
              </div>
            </van-tab>
            <van-tab :title="streetTitle">
              <div class="street-list">
                <div
                  v-for="(item, index) in streetList"
                  :key="index"
                  class="street-item"
                  :class="{ active: selectedStreet === item }"
                  @click="selectStreet(item)"
                >
                  <span class="street-text">{{ item.addressName }}</span>
                  <van-icon
                    v-if="selectedStreet === item"
                    name="success"
                    class="check-icon"
                  />
                </div>
                <van-empty
                  v-if="streetList.length === 0"
                  description="暂无街道数据"
                />
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </van-popup>
      <van-popup v-model="showSurveyTimePicker" position="bottom">
        <van-datetime-picker
          v-model="surveyTimeTemp"
          type="date"
          title="选择查勘日期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onSurveyTimeConfirm"
          @cancel="showSurveyTimePicker = false"
        />
      </van-popup>
      <van-popup v-model="showHouseTypePicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="houseTypeColumns"
          value-key="name"
          @confirm="onHouseTypeConfirm"
          @cancel="showHouseTypePicker = false"
        />
      </van-popup>
      <van-popup v-model="showHouseNaturePicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="houseNatureColumns"
          value-key="name"
          @confirm="onHouseNatureConfirm"
          @cancel="showHouseNaturePicker = false"
        />
      </van-popup>
      <van-popup v-model="showConstructionTimePicker" position="bottom">
        <van-datetime-picker
          v-model="constructionTimeTemp"
          type="date"
          title="选择施工时间"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConstructionTimeConfirm"
          @cancel="showConstructionTimePicker = false"
        />
      </van-popup>
      <van-popup v-model="showTermiteSpeciesPicker" position="bottom">
        <div class="termite-species-picker">
          <van-picker
            show-toolbar
            :columns="termiteSpeciesColumns"
            value-key="name"
            @confirm="onTermiteSpeciesPickerConfirm"
            @cancel="onTermiteSpeciesCancel"
          />
          <!-- 当选择"其他"时显示输入框 -->
          <div
            v-if="selectedTermiteSpecies === '其他'"
            class="custom-input-section"
          >
            <van-field
              v-model="customTermiteSpecies"
              placeholder="请输入其他白蚁蚁种"
              label="其他"
              border
            />
            <div class="custom-input-footer">
              <van-button class="cancel-btn" @click="onTermiteSpeciesCancel">
                取消
              </van-button>
              <van-button
                class="confirm-btn"
                type="primary"
                @click="onCustomTermiteSpeciesConfirm"
              >
                确定
              </van-button>
            </div>
          </div>
        </div>
      </van-popup>
      <van-popup v-model="showSatisfactionPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="satisfactionColumns"
          value-key="name"
          @confirm="onSatisfactionConfirm"
          @cancel="showSatisfactionPicker = false"
        />
      </van-popup>
      <van-popup v-model="showTaskDatePicker" position="bottom">
        <van-datetime-picker
          v-model="taskDateTemp"
          type="date"
          title="选择日期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="confirmTaskDate"
        />
      </van-popup>
      <!-- 灭治部位弹窗 -->
      <van-popup
        v-model="showExterminationAreaPicker"
        position="bottom"
        :style="{ height: '70vh' }"
      >
        <div class="extermination-area-picker">
          <div class="picker-header">
            <span class="picker-title">添加灭治部位</span>
            <van-icon
              name="cross"
              @click="showExterminationAreaPicker = false"
            />
          </div>

          <!-- 类型选择和新增按钮 -->
          <div class="type-selection">
            <div class="selection-row">
              <van-radio-group
                v-model="exterminationAreaType"
                direction="horizontal"
              >
                <van-radio name="自用">自用</van-radio>
                <van-radio name="公用">公用</van-radio>
              </van-radio-group>
              <van-button
                type="info"
                size="small"
                @click="addExterminationArea"
              >
                新增
              </van-button>
            </div>
          </div>

          <!-- 表格区域 -->
          <div class="table-container">
            <div class="table-header">
              <div class="header-cell">灭治部位</div>
              <div class="header-cell">灭治点位数</div>
              <div class="header-cell">操作</div>
            </div>
            <div class="table-body">
              <div
                v-for="(item, index) in exterminationAreaList"
                :key="index"
                class="table-row"
              >
                <div class="table-cell">
                  <van-field
                    v-model="item.area"
                    placeholder="灭治部位"
                    border
                  />
                </div>
                <div class="table-cell">
                  <van-field
                    v-model="item.points"
                    placeholder="点位数"
                    type="number"
                    border
                  />
                </div>
                <div class="table-cell">
                  <van-button
                    type="default"
                    size="mini"
                    @click="removeExterminationArea(index)"
                  >
                    删除
                  </van-button>
                </div>
              </div>
              <div
                v-if="exterminationAreaList.length === 0"
                class="empty-state"
              >
                <van-empty description="暂无数据" />
              </div>
            </div>
          </div>

          <!-- 底部按钮 -->
          <div class="picker-footer">
            <van-button
              class="cancel-btn"
              @click="showExterminationAreaPicker = false"
            >
              取消
            </van-button>
            <van-button
              class="confirm-btn"
              type="primary"
              @click="confirmExterminationArea"
            >
              确定
            </van-button>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 底部操作栏 -->
    <div class="action-bar">
      <van-button class="btn-delete" round type="danger" plain @click="onDelete"
        >删除</van-button
      >
      <van-button
        class="btn-submit"
        round
        type="primary"
        plain
        @click="onSubmit"
        >提交审核</van-button
      >
      <van-button class="btn-save" round type="primary" @click="onSave"
        >保存</van-button
      >
    </div>
  </div>
</template>

<script>
import { uploadApi, termite } from "@/api/index";
export default {
  name: "reportHome",
  data() {
    return {
      uploader: [],
      taskUploader: [],
      form: {
        controlId: "", // 防治单位id
        projectName: "",
        bianhao: "",
        time: "",
        infirmation: "",
        type: "",
        entryMethod: "系统录入", // 录入方式，默认为系统录入
        communityName: "",
        communityAddress: "",
        detailAddress: "",
        residentType: "unit",
        unitName: "",
        contactPerson: "",
        contactPhone: "",
        surveyTime: "",
        houseType: "",
        isTermite: "",
        houseNature: "",
        isFirstTime: "",
        discoveryLocation: "",
        isExterminated: "是",
        constructionStatus: "",
        reason: "",
        image: "",
        constructionTime: "",
        exterminationArea: "",
        exterminationAreaList: [],
        exterminationAreaSize: "",
        medicationName: "",
        chargeAmount: "",
        termiteSpecies: "",
        userSatisfaction: "",
        ownerPresent: "",
        userSignature: "",
        taskImage: "",
        taskDate: "",
      },
      taskDateTemp: null,
      timeTemp: null,
      surveyTimeTemp: null,
      constructionTimeTemp: null,
      showPicker: false,
      showTimePicker: false,
      showInfirmationPicker: false,
      showCommunityPicker: false,
      showAddressPicker: false,
      showSurveyTimePicker: false,
      showHouseTypePicker: false,
      showHouseNaturePicker: false,
      showConstructionTimePicker: false,
      showTermiteSpeciesPicker: false,
      showSatisfactionPicker: false,
      showTaskDatePicker: false,
      showExterminationAreaPicker: false,
      selectedTermiteSpecies: "", // 当前选中的白蚁蚁种
      customTermiteSpecies: "", // 自定义白蚁蚁种输入
      columns: [],
      infirmationColumns: [
        { name: "企业自行受理" },
        { name: "962121受理" },
        { name: "其他" },
      ],
      communityColumns: [
        // 暂时为空，后续可以添加小区数据
      ],
      communitySearchKeyword: "", // 小区搜索关键词
      communityList: [], // 小区数据，从API获取
      addressColumns: [
        // 第一列
        {
          values: ["周一", "周二", "周三", "周四", "周五"],
          defaultIndex: 2,
        },
        // 第二列
        {
          values: ["上午", "下午", "晚上"],
          defaultIndex: 1,
        },
      ],
      houseTypeColumns: [
        { name: "旧里" },
        { name: "新里" },
        { name: "工房" },
        { name: "花园住宅" },
        { name: "商品房" },
        { name: "其他" },
        { name: "非居住" },
      ],
      houseNatureColumns: [
        { name: "公房" },
        { name: "售后房" },
        { name: "商品房" },
        { name: "其他" },
      ],
      termiteSpeciesColumns: [
        { name: "白蚁" },
        { name: "散白蚁" },
        { name: "其他" },
      ],
      satisfactionColumns: [
        { name: "满意" },
        { name: "较满意" },
        { name: "不满意" },
      ],
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2030, 11, 31),
      searchParams: {
        pageNumber: 1,
        pageSize: 50,
        stNameFrst: "",
      },
      searchTimer: null, // 搜索防抖定时器
      active: 0, // 当前激活的标签索引
      areaList: [],
      streetList: [],
      areaTitle: "区域",
      streetTitle: "街道",
      selectedArea: null, // 选中的区域
      selectedStreet: null, // 选中的街道
      // 灭治部位相关数据
      exterminationAreaType: "自用", // 灭治部位类型：自用/公用
      exterminationAreaList: [], // 灭治部位列表
    };
  },
  computed: {
    // 灭治部位显示文本
    exterminationAreaDisplayText() {
      if (
        this.form.exterminationAreaList &&
        this.form.exterminationAreaList.length === 0
      ) {
        return "";
      }
      if (
        !this.form.exterminationAreaList ||
        this.form.exterminationAreaList.length === 0
      ) {
        return "";
      }
      const typeText = this.form.exterminationAreaType || "自用";
      const count = this.form.exterminationAreaList.length;
      return `${typeText} (${count}项)`;
    },
  },
  created() {
    this.init();
    this.checkRecordId();
  },
  beforeDestroy() {
    // 清理定时器
    if (this.searchTimer) {
      clearTimeout(this.searchTimer);
    }
  },
  methods: {
    init() {
      termite.getCompany().then((res) => {
        if (res.errorCode === "000000") {
          this.columns = res.data;
        }
      });
      termite.getAddressQuery({}).then((res) => {
        if (res.errorCode === "000000") {
          console.log(res, "99999");
          this.areaList = res.data;
        }
      });
    },
    onConfirm(value) {
      console.log(value, "cbajbcajcbj");
      this.form.projectName = value.controlName;
      this.form.controlId = value.controlId;
      this.showPicker = false;
    },
    onAddressConfirm(value) {
      this.form.communityAddress = value.name;
      this.showAddressPicker = false;
    },
    selectArea(item) {
      this.selectedArea = item;
      // 可以在这里添加其他逻辑，比如切换到下一个标签页
      console.log("选中的区域:", item);
      termite.getAddressQuery({ faId: item.addressId }).then((res) => {
        if (res.errorCode === "000000") {
          console.log(res, "99999");
          this.streetList = res.data;
        }
      });
    },
    selectStreet(item) {
      this.selectedStreet = item;
      console.log("选中的街道:", item);
    },
    closeAddressPicker() {
      // 将选中的区域和街道数据反显到小区地址
      let addressText = "";

      if (this.selectedArea) {
        addressText += this.selectedArea.addressName || "";
      }

      if (this.selectedStreet) {
        if (addressText) {
          addressText += " ";
        }
        addressText += this.selectedStreet.addressName || "";
      }

      if (addressText) {
        this.form.communityAddress = addressText;
      }

      // 关闭弹窗
      this.showAddressPicker = false;
    },
    onTypeChange() {
      // 小区类型切换时清空小区名称和小区地址
      this.form.communityName = "";
      this.form.communityAddress = "";
      // 同时清空选中的区域和街道
      this.selectedArea = null;
      this.selectedStreet = null;
      this.streetList = [];
    },
    onResidentTypeChange() {
      // 住户类型切换时清空相关字段
      this.form.unitName = "";
      this.form.contactPerson = "";
      this.form.contactPhone = "";
    },
    onHouseTypeConfirm(value) {
      this.form.houseType = value.name;
      this.showHouseTypePicker = false;
    },
    onHouseNatureConfirm(value) {
      this.form.houseNature = value.name;
      this.showHouseNaturePicker = false;
    },
    onTermiteSpeciesPickerConfirm(value) {
      this.selectedTermiteSpecies = value.name;

      // 如果选择的是"其他"，不关闭弹窗，等待用户输入
      if (value.name === "其他") {
        return;
      }

      // 如果不是"其他"，直接设置值并关闭弹窗
      this.form.termiteSpecies = value.name;
      this.showTermiteSpeciesPicker = false;
    },
    onTermiteSpeciesCancel() {
      this.showTermiteSpeciesPicker = false;
      this.selectedTermiteSpecies = "";
      this.customTermiteSpecies = "";
    },
    onCustomTermiteSpeciesConfirm() {
      if (!this.customTermiteSpecies.trim()) {
        this.$toast.fail("请输入白蚁蚁种名称");
        return;
      }

      this.form.termiteSpecies = this.customTermiteSpecies.trim();
      this.showTermiteSpeciesPicker = false;
      this.selectedTermiteSpecies = "";
      this.customTermiteSpecies = "";
    },
    onSatisfactionConfirm(value) {
      this.form.userSatisfaction = value.name;
      this.showSatisfactionPicker = false;
    },
    onTimeConfirm(value) {
      // 将日期格式化为 YYYY-MM-DD 格式
      const year = value.getFullYear();
      const month = String(value.getMonth() + 1).padStart(2, "0");
      const day = String(value.getDate()).padStart(2, "0");
      this.form.time = `${year}-${month}-${day}`;
      this.showTimePicker = false;
    },
    onSurveyTimeConfirm(value) {
      // 将日期格式化为 YYYY-MM-DD 格式（与受理时间格式一致）
      const year = value.getFullYear();
      const month = String(value.getMonth() + 1).padStart(2, "0");
      const day = String(value.getDate()).padStart(2, "0");
      this.form.surveyTime = `${year}-${month}-${day}`;
      this.showSurveyTimePicker = false;
    },
    onConstructionTimeConfirm(value) {
      // 将日期格式化为 YYYY-MM-DD 格式
      const year = value.getFullYear();
      const month = String(value.getMonth() + 1).padStart(2, "0");
      const day = String(value.getDate()).padStart(2, "0");
      this.form.constructionTime = `${year}-${month}-${day}`;
      this.showConstructionTimePicker = false;
    },
    openSurveyTimePicker() {
      // 如果已有字符串形式日期，尝试解析为 Date
      if (this.form.surveyTime) {
        const parsed = new Date(this.form.surveyTime);
        this.surveyTimeTemp = isNaN(parsed.getTime()) ? new Date() : parsed;
      } else {
        this.surveyTimeTemp = new Date();
      }
      this.showSurveyTimePicker = true;
    },
    openConstructionTimePicker() {
      // 如果已有字符串形式日期，尝试解析为 Date
      if (this.form.constructionTime) {
        const parsed = new Date(this.form.constructionTime);
        this.constructionTimeTemp = isNaN(parsed.getTime())
          ? new Date()
          : parsed;
      } else {
        this.constructionTimeTemp = new Date();
      }
      this.showConstructionTimePicker = true;
    },
    onInfirmationConfirm(value) {
      this.form.infirmation = value.name;
      this.showInfirmationPicker = false;
    },
    onCommunityConfirm(value) {
      this.form.communityName = value.name;
      this.showCommunityPicker = false;
    },
    onCommunitySearch() {
      // 清除之前的定时器
      if (this.searchTimer) {
        clearTimeout(this.searchTimer);
      }

      // 如果输入框为空，清空列表
      if (!this.communitySearchKeyword.trim()) {
        this.communityList = [];
        return;
      }

      // 设置防抖定时器，500ms后执行搜索
      this.searchTimer = setTimeout(() => {
        this.searchParams.stNameFrst = this.communitySearchKeyword;
        this.getCommunityList();
      }, 500);
    },
    async getCommunityList() {
      try {
        const res = await termite.getSectList(this.searchParams);
        if (res.errorCode === "000000") {
          this.communityList = res.data.map((item) => ({
            name: item.stNameFrst || "",
            stAddrFrst: item.stAddrFrst || "",
            strName: item.strName || "",
            sectId: item.sectId,
            sectType: item.sectType,
            cspId: item.cspId,
            cspName: item.cspName,
            hoId: item.hoId,
            hoName: item.hoName,
            hpbId: item.hpbId,
            hpbName: item.hpbName,
          }));
        } else {
          console.error("获取小区列表失败:", res.errorMsg);
          this.$toast.fail(res.errorMsg || "获取小区列表失败");
        }
      } catch (error) {
        console.error("获取小区列表异常:", error);
        this.$toast.fail("网络异常，请重试");
      }
    },
    onCommunityItemClick(item) {
      console.log("点击的小区项:", item);
      this.form.communityName = item.name;
      // 设置小区地址为 hpbName + strName
      this.form.communityAddress = (item.hpbName || "") + (item.strName || "");
      this.showCommunityPicker = false;
    },
    openCommunityPicker() {
      this.showCommunityPicker = true;
      // 清空搜索关键词和列表
      this.communitySearchKeyword = "";
      this.communityList = [];
      // 清空搜索参数
      this.searchParams.stNameFrst = "";
      // 不自动加载数据，等待用户输入
    },
    goToSignature() {
      // 将当前表单数据存储到sessionStorage，以便签名页面返回时恢复
      sessionStorage.setItem("formData", JSON.stringify(this.form));
      // 设置标识，表示即将跳转到签名页面
      sessionStorage.setItem("fromSignaturePage", "true");
      this.$router.push("/signature");
    },
    goToHistoryRecord() {
      this.$router.push("/historyRecord");
    },
    restoreFormData() {
      // 检查是否从签名页面返回
      const fromSignaturePage = sessionStorage.getItem("fromSignaturePage");
      if (!fromSignaturePage) {
        return; // 不是从签名页面返回，不恢复数据
      }

      // 清除标识
      sessionStorage.removeItem("fromSignaturePage");

      // 从sessionStorage恢复表单数据
      const savedFormData = sessionStorage.getItem("formData");
      if (savedFormData) {
        try {
          const formData = JSON.parse(savedFormData);
          this.form = { ...this.form, ...formData };
        } catch (error) {
          console.error("恢复表单数据失败:", error);
        }
      }

      // 检查是否有新的签名URL
      const signatureUrl = sessionStorage.getItem("signatureUrl");
      if (signatureUrl) {
        this.form.userSignature = signatureUrl;
        // 清除签名URL，避免重复使用
        sessionStorage.removeItem("signatureUrl");
      }
    },
    checkRecordId() {
      // 检查URL中是否携带了记录ID
      const recordId = this.$route.query.id;
      if (recordId) {
        console.log("检测到记录ID:", recordId);
        this.loadRecordData(recordId);
      } else {
        console.log("未检测到记录ID，使用默认表单");
      }
    },
    loadRecordData(recordId) {
      // 根据记录ID加载对应的历史数据
      console.log("正在加载记录数据，ID:", recordId);

      // 这里可以根据ID调用API获取历史数据

      const recordData = {
        controlId: "12345",
        projectName: "白蚁防治项目-历史记录",
        bianhao: "BY2024001",
        time: "2024-01-15",
        infirmation: "企业自行受理",
        type: "非住宅",
        entryMethod: "手动录入",
        communityName: "阳光花园小区",
        communityAddress: "上海市黄浦区南京东路123号",
        detailAddress: "阳光花园小区3号楼2单元",
        residentType: "unit",
        unitName: "上海科技有限公司",
        contactPerson: "张经理",
        contactPhone: "13800138000",
        surveyTime: "2024-01-16",
        houseType: "商品房",
        isTermite: "是",
        houseNature: "自住",
        isFirstTime: "否",
        discoveryLocation: "客厅、卧室",
        isExterminated: "是",
        constructionStatus: "已完成",
        reason: "",
        image: "",
        constructionTime: "2024-01-17",
        exterminationArea: "自用 (2项)",
        exterminationAreaType: "自用",
        exterminationAreaList: [
          { area: "客厅", points: "3" },
          { area: "卧室", points: "2" },
        ],
        exterminationAreaSize: "25.5",
        medicationName: "高效白蚁防治剂",
        chargeAmount: "1200.00",
        termiteSpecies: "散白蚁",
        userSatisfaction: "满意",
        ownerPresent: "在场",
        userSignature: "",
        taskImage: "",
        taskDate: "2024-01-18",
      };
      if (recordData) {
        // 将历史数据填充到表单中
        this.form = { ...recordData };
        this.$toast.success(`已加载历史记录 ${recordId} 的数据`);
      } else {
        this.$toast.fail("未找到对应的历史记录");
      }
    },
    afterTaskRead(file) {
      console.log(file, "aaaa");

      this.taskUploader[0].status = "uploading";

      uploadApi
        .uploadImage(file.file)
        .then((res) => {
          console.log(res, "任务单图片上传");
          if (res.errorCode === "000000") {
            this.form.taskImage = res.data;
          }
        })
        .finally(() => {
          this.taskUploader[0].status = "";
        });
    },
    afterRead(file) {
      this.uploader[0].status = "uploading";

      uploadApi
        .uploadImage(file.file)
        .then((res) => {
          console.log(res, "图片山川解");
          if (res.errorCode === "000000") {
            this.form.image = res.data;
          }
        })
        .finally(() => {
          this.uploader[0].status = "";
        });
    },
    onDelete() {
      // TODO: 根据需求实现删除逻辑
      console.log("删除");
    },
    onSubmit() {
      // TODO: 根据需求实现提交审核逻辑
      console.log("提交审核");
    },
    onSave() {
      // TODO: 根据需求实现保存逻辑
      console.log("保存");
    },
    openTaskDatePicker() {
      // 如果已有字符串形式日期，尝试解析为 Date
      if (this.form.taskDate) {
        const parsed = new Date(this.form.taskDate);
        this.taskDateTemp = isNaN(parsed.getTime()) ? new Date() : parsed;
      } else {
        this.taskDateTemp = new Date();
      }
      this.showTaskDatePicker = true;
    },
    confirmTaskDate(value) {
      // value 为 Date 对象
      const d = value instanceof Date ? value : this.taskDateTemp;
      this.form.taskDate = this.formatDate(d);
      this.showTaskDatePicker = false;
    },
    formatDate(date) {
      const y = date.getFullYear();
      const m = String(date.getMonth() + 1).padStart(2, "0");
      const d = String(date.getDate()).padStart(2, "0");
      return `${y}-${m}-${d}`;
    },
    // 灭治部位相关方法
    openExterminationAreaPicker() {
      // 从form数据中同步到弹窗的临时数据
      this.exterminationAreaType = this.form.exterminationAreaType || "自用";
      this.exterminationAreaList = JSON.parse(
        JSON.stringify(this.form.exterminationAreaList || [])
      );

      // 如果列表为空，添加一个空行
      if (this.exterminationAreaList.length === 0) {
        this.exterminationAreaList.push({ area: "", count: "" });
      }

      this.showExterminationAreaPicker = true;
    },
    addExterminationArea() {
      // 检查是否有未填写完整的数据
      if (this.exterminationAreaList.length > 0) {
        const lastItem =
          this.exterminationAreaList[this.exterminationAreaList.length - 1];
        if (!lastItem.area.trim() || !lastItem.points.trim()) {
          this.$toast.fail("请先完善上一项信息");
          return;
        }
      }

      this.exterminationAreaList.push({
        area: "",
        points: "",
      });
    },
    removeExterminationArea(index) {
      this.exterminationAreaList.splice(index, 1);
    },
    confirmExterminationArea() {
      // 过滤掉空的数据项
      const validItems = this.exterminationAreaList.filter(
        (item) => item.area.trim() && item.points.trim()
      );

      if (validItems.length === 0) {
        this.$toast.fail("请至少添加一个灭治部位信息");
        return;
      }

      // 保存到表单数据
      this.form.exterminationAreaType = this.exterminationAreaType;
      this.form.exterminationAreaList = [...validItems];

      this.showExterminationAreaPicker = false;
      this.$toast.success("灭治部位信息已保存");
    },
    // 统一的数字输入处理方法
    formatNumberInput(value, fieldName) {
      // 只允许数字和一个小数点
      let formattedValue = value.replace(/[^\d.]/g, "");

      // 确保只有一个小数点
      const parts = formattedValue.split(".");
      if (parts.length > 2) {
        formattedValue = parts[0] + "." + parts.slice(1).join("");
      }

      // 限制最多两位小数
      if (parts.length === 2 && parts[1].length > 2) {
        formattedValue = parts[0] + "." + parts[1].substring(0, 2);
      }

      // 首位不能为0（除非是0.xx格式）
      if (
        formattedValue.length > 1 &&
        formattedValue[0] === "0" &&
        formattedValue[1] !== "."
      ) {
        formattedValue = formattedValue.substring(1);
      }

      // 更新表单数据（使用 $nextTick 确保更新）
      this.$nextTick(() => {
        this.form[fieldName] = formattedValue;
      });
    },
    // 灭治面积输入处理
    onExterminationAreaSizeInput(value) {
      this.formatNumberInput(value, "exterminationAreaSize");
    },
    // 收费金额输入处理
    onChargeAmountInput(value) {
      this.formatNumberInput(value, "chargeAmount");
    },
  },
  mounted() {
    // 页面激活时恢复表单数据
    this.restoreFormData();
  },
  activated() {
    // 组件被激活时恢复表单数据
    this.restoreFormData();
  },
};
</script>

<style lang="scss" scoped>
.company-list-page {
  // background-color: #fff;
  height: 100vh;
  overflow-y: auto;
  position: relative;
}
.main {
  padding: 16px;
  padding-top: 62px;
  /* 兼容 iOS 安全区域，避免底部空白 */
  /* 动态留出按钮高度(约64px) + 15px 间距 */
  padding-bottom: calc(79px + constant(safe-area-inset-bottom));
  padding-bottom: calc(79px + env(safe-area-inset-bottom));
  .voucher {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    // padding: 20px 15px 7px;
  }
  .voucher::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    background: #1890ff;
    border-radius: 3px;
    margin-right: 8px;
  }
}
.nav-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  .spanHeight {
    height: 22px;
    line-height: 24px;
    color: #909399;
  }
}

// 去掉 van-field 图标的左右内边距
:deep(.van-field__right-icon) {
  padding: 0 !important;
  margin: 0 !important;
}

// 为所有底部弹窗添加圆角
:deep(.van-popup--bottom) {
  border-radius: 12px 12px 0 0 !important;
}

// 蓝色矩形图标样式
.blue-rectangle-icon {
  width: 12px;
  height: 8px;
  background-color: #1890ff;
  border-radius: 1px;
}
.uploadBox {
  // padding: 0 15px;
  .uploadBox_tit {
    background-color: #fff;
    padding: 0 17px;
    .color {
      color: #646566;
      font-size: 14px;
      padding-top: 12px;
      margin-bottom: 13px;
    }
  }
}
.signature-section {
  padding: 0 15px 15px;
  background: #fff;
}
// 章节标题样式
.section-title {
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 500;
  font-size: 15px;
  color: #333333;
  margin: 20px 0px 7px;
  display: flex;
  align-items: center;

  &::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    background: #1890ff;
    border-radius: 3px;
    margin-right: 8px;
  }
}

/* 底部操作栏 */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.action-bar .van-button {
  flex: 1;
  height: 44px;
  font-size: 16px;
}

.btn-delete {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.btn-submit {
  color: #1890ff;
  border-color: #1890ff;
}

.btn-save {
  background: #1890ff;
  border-color: #1890ff;
}

// 小区选择器样式
.community-picker {
  background: #fff;
  border-radius: 8px 8px 0 0;
  max-height: 60vh;

  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #ebedf0;

    .picker-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

    .van-icon {
      font-size: 18px;
      color: #969799;
      cursor: pointer;
    }
  }

  .search-box {
    padding: 12px 16px;
    border-bottom: 1px solid #ebedf0;

    .search-input {
      width: 100%;
      height: 40px;
      padding: 0 12px;
      border: 1px solid #ebedf0;
      border-radius: 6px;
      font-size: 14px;
      color: #333;
      background-color: #f7f8fa;

      &:focus {
        outline: none;
        border-color: #1890ff;
        background-color: #fff;
      }

      &::placeholder {
        color: #969799;
      }
    }
  }

  .community-list {
    max-height: 40vh;
    overflow-y: auto;

    .community-item {
      padding: 16px;
      border-bottom: 1px solid #f7f8fa;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f7f8fa;
      }

      &:active {
        background-color: #ebedf0;
      }

      .community-name {
        font-size: 15px;
        color: #333;
        margin-bottom: 4px;
      }

      .community-address {
        font-size: 13px;
        color: #969799;
      }
    }

    .no-data {
      padding: 40px 16px;
      text-align: center;
      color: #969799;
      font-size: 14px;
    }
  }
}

// 地址选择器样式
.address-picker {
  background: #fff;
  border-radius: 8px 8px 0 0;
  max-height: 60vh;

  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #ebedf0;

    .picker-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

    .van-icon {
      font-size: 18px;
      color: #969799;
      cursor: pointer;
    }
  }

  // 区域列表样式
  .area-list {
    max-height: 40vh;
    overflow-y: auto;
    padding: 0;

    .area-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #f7f8fa;
      cursor: pointer;
      transition: background-color 0.2s;
      background-color: #fff;

      &:hover {
        background-color: #f7f8fa;
      }

      &.active {
        background-color: #f0f8ff;
        color: #1890ff;

        .area-text {
          color: #1890ff;
          font-weight: 500;
        }

        .check-icon {
          color: #1890ff;
          font-size: 16px;
        }
      }

      .area-text {
        font-size: 15px;
        color: #333;
        flex: 1;
      }

      .check-icon {
        color: #1890ff;
        font-size: 16px;
        margin-left: 8px;
      }
    }
  }

  // 街道列表样式（与区域列表样式相同）
  .street-list {
    max-height: 40vh;
    overflow-y: auto;
    padding: 0;

    .street-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #f7f8fa;
      cursor: pointer;
      transition: background-color 0.2s;
      background-color: #fff;

      &:hover {
        background-color: #f7f8fa;
      }

      &.active {
        background-color: #f0f8ff;
        color: #1890ff;

        .street-text {
          color: #1890ff;
          font-weight: 500;
        }

        .check-icon {
          color: #1890ff;
          font-size: 16px;
        }
      }

      .street-text {
        font-size: 15px;
        color: #333;
        flex: 1;
      }

      .check-icon {
        color: #1890ff;
        font-size: 16px;
        margin-left: 8px;
      }
    }
  }
}

// 灭治部位弹窗样式
.extermination-area-picker {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;

  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fafafa;

    .picker-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }

    .van-icon {
      font-size: 20px;
      color: #999;
      cursor: pointer;
      padding: 4px;
      border-radius: 50%;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f5f5f5;
      }
    }
  }

  .type-selection {
    padding: 20px 16px;
    background: #fff;
    border-bottom: 8px solid #f8f9fa;
    flex-shrink: 0;

    .selection-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    :deep(.van-radio-group) {
      display: flex;
      gap: 24px;
    }

    :deep(.van-radio) {
      .van-radio__label {
        font-size: 16px;
        color: #333;
        font-weight: 500;
      }
    }

    .van-button {
      height: 36px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      padding: 0 16px;
      box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
      flex-shrink: 0;
    }
  }

  .table-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;

    .table-header {
      display: flex;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-bottom: 2px solid #dee2e6;
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .header-cell {
        flex: 1;
        padding: 16px 8px;
        font-size: 15px;
        font-weight: 600;
        color: #495057;
        text-align: center;
        border-right: 1px solid #dee2e6;
        position: relative;

        &:last-child {
          border-right: none;
        }

        &:first-child {
          border-top-left-radius: 8px;
        }

        &:last-child {
          border-top-right-radius: 8px;
        }
      }
    }

    .table-body {
      flex: 1;
      overflow-y: auto;
      background: #fff;

      .table-row {
        display: flex;
        border-bottom: 1px solid #f1f3f4;
        transition: background-color 0.2s;

        &:hover {
          background-color: #f8f9fa;
        }

        &:last-child {
          border-bottom: none;
        }

        .table-cell {
          flex: 1;
          padding: 12px 8px;
          border-right: 1px solid #f1f3f4;
          display: flex;
          align-items: center;
          min-height: 60px;

          &:last-child {
            border-right: none;
            justify-content: center;
          }

          .van-field {
            width: 100%;
            padding: 0;

            :deep(.van-field__control) {
              font-size: 15px;
              text-align: center;
              padding: 8px 12px;
              border-radius: 6px;
              border: 1px solid #e1e5e9;
              background: #fafbfc;
              transition: all 0.2s;

              &:focus {
                border-color: #1890ff;
                background: #fff;
                box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
              }
            }

            :deep(.van-field__placeholder) {
              color: #adb5bd;
              font-size: 14px;
            }
          }

          .van-button {
            border-radius: 6px;
            font-size: 13px;
            padding: 6px 12px;
            border: 1px solid #dc3545;
            color: #dc3545;
            background: #fff;
            transition: all 0.2s;

            &:hover {
              background: #dc3545;
              color: #fff;
            }
          }
        }
      }

      .empty-state {
        padding: 60px 20px;
        text-align: center;
        background: #fff;

        :deep(.van-empty) {
          .van-empty__description {
            color: #6c757d;
            font-size: 15px;
            margin-top: 16px;
          }
        }
      }
    }
  }

  .picker-footer {
    display: flex;
    gap: 12px;
    padding: 20px 16px;
    background: #fafafa;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);

    .cancel-btn {
      flex: 1;
      height: 48px;
      border: 2px solid #6c757d;
      color: #6c757d;
      background: #fff;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.2s;

      &:hover {
        background: #6c757d;
        color: #fff;
      }
    }

    .confirm-btn {
      flex: 1;
      height: 48px;
      background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
      transition: all 0.2s;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }
}

// 白蚁蚁种选择器样式
.termite-species-picker {
  .custom-input-section {
    padding: 16px;
    background: #fff;
    border-top: 1px solid #ebedf0;

    .van-field {
      margin-bottom: 16px;
    }

    .custom-input-footer {
      display: flex;
      gap: 12px;

      .cancel-btn {
        flex: 1;
        height: 44px;
        border: 1px solid #ebedf0;
        color: #646566;
        background: #fff;
        border-radius: 6px;
      }

      .confirm-btn {
        flex: 1;
        height: 44px;
        background: #1890ff;
        border-color: #1890ff;
        border-radius: 6px;
      }
    }
  }
}
</style>
